document.addEventListener('click', event => {
    showCloseSubelements(event);
})


function showCloseSubelements(event) {
    // Показываем или закрываем подэлементы

    const menuElement = event.target.closest('[data-menu-element-level]');
    if (!menuElement) return;

    if (menuElement.dataset.list_of_subelementsOpen == 'false') {
        showSubelements(menuElement);
    } else if (menuElement.dataset.list_of_subelementsOpen == 'true') {
        closeSubelements(menuElement);
    };
}


function closeSubelements(menuElement) {
    // Закрываем подэлементы

    menuElement.querySelector('.list-of-subelements').innerHTML = '';
    menuElement.dataset.list_of_subelementsOpen = 'false';
    menuElement.style.backgroundColor = '';
}


function showSubelements(menuElement) {
    // Показываем подэлементы

    const [menuElementLevel, menuElementId] = getBasicInformationOfMenuElement(
        menuElement
    )
    const url = getUrlForRequest(menuElementLevel, menuElementId);

    base.sendAjaxRequest('GET', url)
        .then(result => {
            if (menuElementLevel == 1) {
                insertLevelElements(
                    menuElement,
                    result,
                    base.getHtmlWithSecondLevelElements(result),
                    '[data-list-of-second-level-subelements]'
                )
            } else if (menuElementLevel == 2) {
                insertLevelElements(
                    menuElement,
                    result,
                    base.getHtmlWithThirdLevelElements(result),
                    '[data-list-of-third-level-subelements]'
                )
            }
        });

    markElementOpen(menuElement);


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function getUrlForRequest(menuElementLevel, menuElementId) {
        // Получаем url для запроса

        request_parameters = `?get_subelements_for_menu=true`;
        request_parameters += `&menu_element_level=${menuElementLevel}`;
        request_parameters += `&menu_element_id=${menuElementId}`;

        const partOfRequestWithListOfMenus = document.location.origin + '/menu/home/'
        const isPageWithSingleMenu = document.location.href.includes(
            partOfRequestWithListOfMenus
        )

        if (!isPageWithSingleMenu) request_parameters += `&single_menu=true`;

        return document.location.origin + '/menu' + request_parameters;
    }

    function markElementOpen(elementHtml) {
        // Помечаем элемент открытым

        if (menuElementLevel == 1) {
            elementHtml.style.backgroundColor = '#18797c';
        }
        elementHtml.dataset.list_of_subelementsOpen = 'true';
    }
}


function insertLevelElements(elementHtml, result, levelElements, insertionPoint) {
    // Вставляем элементы указанного уровня уровня

    if (!Object.values(result).length) {
        insertEmtyValueIntoListOfSubelements(elementHtml);
        return
    }
    elementHtml.querySelector(insertionPoint).innerHTML = levelElements;
}


function getBasicInformationOfMenuElement(elementHtml) {
    // Получаем основную информацию элемента меню

    const menuElementLevel = elementHtml.querySelector(
        'input[name="menu-element-level"]'
    ).value;
    const menuElementId = elementHtml.querySelector(
        'input[name="menu-element-id"]'
    ).value;
    return [menuElementLevel, menuElementId]
}


function insertEmtyValueIntoListOfSubelements(elementHtml) {
    // Вставляем пустое значение в список подэлементов

    elementHtml.querySelector('[data-list-of-subelements]').innerHTML = `
        <span class="no-subelements">Отсуствуют подэлементы</span>
    `
}
